<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html class="no-js">

<head>
<title>Admin Home Page</title>
<!-- Bootstrap -->
<link href="assets/bootstrap/css/bootstrap.min.css" rel="stylesheet"
	media="screen">
<link href="assets/bootstrap/css/bootstrap-responsive.min.css"
	rel="stylesheet" media="screen">
<link href="assets/vendors/easypiechart/jquery.easy-pie-chart.css"
	rel="stylesheet" media="screen">
<link href="assets/mine/styles.css" rel="stylesheet" media="screen">
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
            <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
<script src="vendors/modernizr-2.6.2-respond-1.1.0.min.js"></script>
</head>

<body>
	<div class="navbar navbar-fixed-top">
		<div class="navbar-inner">
			<div class="container-fluid">
				<a class="btn btn-navbar" data-toggle="collapse"
					data-target=".nav-collapse"> <span class="icon-bar"></span> <span
					class="icon-bar"></span> <span class="icon-bar"></span>
				</a> <a class="brand" href="#">Admin Panel</a>
				<div class="nav-collapse collapse">
					<ul class="nav pull-right">
						<li class="dropdown"><a href="#" role="button"
							class="dropdown-toggle" data-toggle="dropdown"> <i
								class="icon-user"></i> Vincent Gabriel <i class="caret"></i>

						</a>
							<ul class="dropdown-menu">
								<li><a tabindex="-1" href="#">Profile</a></li>
								<li class="divider"></li>
								<li><a tabindex="-1" href="login.html">Logout</a></li>
							</ul></li>
					</ul>
					<ul class="nav">
						<li class="active"><a href="#">Dashboard</a></li>
						<li class="dropdown"><a href="#" data-toggle="dropdown"
							class="dropdown-toggle">Settings <b class="caret"></b>

						</a>
							<ul class="dropdown-menu" id="menu1">
								<li><a href="#">Tools <i class="icon-arrow-right"></i>

								</a>
									<ul class="dropdown-menu sub-menu">
										<li><a href="#">Reports</a></li>
										<li><a href="#">Logs</a></li>
										<li><a href="#">Errors</a></li>
									</ul></li>
								<li><a href="#">SEO Settings</a></li>
								<li><a href="#">Other Link</a></li>
								<li class="divider"></li>
								<li><a href="#">Other Link</a></li>
								<li><a href="#">Other Link</a></li>
							</ul></li>
						<li class="dropdown"><a href="#" role="button"
							class="dropdown-toggle" data-toggle="dropdown">Content <i
								class="caret"></i>

						</a>
							<ul class="dropdown-menu">
								<li><a tabindex="-1" href="#">Blog</a></li>
								<li><a tabindex="-1" href="#">News</a></li>
								<li><a tabindex="-1" href="#">Custom Pages</a></li>
								<li><a tabindex="-1" href="#">Calendar</a></li>
								<li class="divider"></li>
								<li><a tabindex="-1" href="#">FAQ</a></li>
							</ul></li>
						<li class="dropdown"><a href="#" role="button"
							class="dropdown-toggle" data-toggle="dropdown">Users <i
								class="caret"></i>

						</a>
							<ul class="dropdown-menu">
								<li><a tabindex="-1" href="#">User List</a></li>
								<li><a tabindex="-1" href="#">Search</a></li>
								<li><a tabindex="-1" href="#">Permissions</a></li>
							</ul></li>
					</ul>
				</div>
				<!--/.nav-collapse -->
			</div>
		</div>
	</div>
	<div class="container-fluid">
		<div class="row-fluid">
			<div class="span3" id="sidebar">
				<ul class="nav nav-list bs-docs-sidenav nav-collapse collapse">
					<li class="active"><a href="index.html"><i
							class="icon-chevron-right"></i> Dashboard</a></li>
					<li><a href="calendar.html"><i class="icon-chevron-right"></i>
							Calendar</a></li>
					<li><a href="stats.html"><i class="icon-chevron-right"></i>
							Statistics (Charts)</a></li>
					<li><a href="buttons.html"><i class="icon-chevron-right"></i>
							Buttons & Icons</a></li>
					<li><a href="interface.html"><i class="icon-chevron-right"></i>
							UI & Interface</a></li>
					<li><a href="#"><span
							class="badge badge-success pull-right">731</span> Orders</a></li>
					<li><a href="#"><span
							class="badge badge-success pull-right">812</span> Invoices</a></li>
					<li><a href="#"><span class="badge badge-info pull-right">27</span>
							Clients</a></li>
					<li><a href="#"><span class="badge badge-info pull-right">1,234</span>
							Users</a></li>
					<li><a href="#"><span class="badge badge-info pull-right">2,221</span>
							Messages</a></li>
					<li><a href="#"><span class="badge badge-info pull-right">11</span>
							Reports</a></li>
					<li><a href="#"><span
							class="badge badge-important pull-right">83</span> Errors</a></li>
					<li><a href="#"><span
							class="badge badge-warning pull-right">4,231</span> Logs</a></li>
				</ul>
			</div>

			<!--/span-->
			<div class="span9" id="content">
				<div class="row-fluid">
					<div class="alert alert-success">
						<button type="button" class="close" data-dismiss="alert">&times;</button>
						<h4>Success</h4>
						The operation completed successfully
					</div>
					<div class="navbar">
						<div class="navbar-inner">
							<ul class="breadcrumb">
								<i class="icon-chevron-left hide-sidebar"><a href='#'
									title="Hide Sidebar" rel='tooltip'>&nbsp;</a></i>
								<i class="icon-chevron-right show-sidebar"
									style="display: none;"><a href='#' title="Show Sidebar"
									rel='tooltip'>&nbsp;</a></i>
								<li><a href="#">Dashboard</a> <span class="divider">/</span>
								</li>
								<li><a href="#">Settings</a> <span class="divider">/</span>
								</li>
								<li class="active">Tools</li>
							</ul>
						</div>
					</div>
				</div>
				<div class="row-fluid"></div>
				<div class="row-fluid">
					<div class="span6">
						<!-- block -->
						<div class="block">
							<div class="navbar navbar-inner block-header">
								<div class="muted pull-left">Users</div>
								<div class="pull-right">
									<span class="badge badge-info">1,234</span>

								</div>
							</div>
							<div class="block-content collapse in">
								<table class="table table-striped">
									<thead>
										<tr>
											<th>#</th>
											<th>First Name</th>
											<th>Last Name</th>
										</tr>
									</thead>
									<tbody>
										<c:forEach var="row" items="${requestScope.kategori}">
											<tr>
												<td>1</td>
												<td>${row.id_kategori}</td>
												<td>${row.kategori}</td>
												<td><a href="#myModal" role="button" class="btn"
													data-toggle="modal"><i class="icon-pencil"></i> Insert</a></td>
											</tr>
										</c:forEach>
									</tbody>
								</table>
							</div>
						</div>
						<!-- /block -->
					</div>
					<div class="span6">
						<!-- block -->
						<div class="block">
							<div class="navbar navbar-inner block-header">
								<div class="muted pull-left">Orders</div>
								<div class="pull-right">
									<span class="badge badge-info">752</span>

								</div>
							</div>
							<div class="block-content collapse in">
								<table class="table table-striped">
									<thead>
										<tr>
											<th>#</th>
											<th>Product</th>
											<th>Date</th>
											<th>Amount</th>
										</tr>
									</thead>
									<tbody>
										<tr>
											<td>1</td>
											<td>Coat</td>
											<td>02/02/2013</td>
											<td>$25.12</td>
										</tr>
										<tr>
											<td>2</td>
											<td>Jacket</td>
											<td>01/02/2013</td>
											<td>$335.00</td>
										</tr>
										<tr>
											<td>3</td>
											<td>Shoes</td>
											<td>01/02/2013</td>
											<td>$29.99</td>
										</tr>
									</tbody>
								</table>
							</div>
						</div>
						<!-- /block -->
					</div>
				</div>
				<!-- Insert Barang -->
				<div id="myModal" class="modal hide fade" tabindex="-1"
					role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal"
							aria-hidden="true">x</button>
						<h3 id="myModalLabel">Modal header</h3>
					</div>
					<div class="modal-body">
						<p>One fine body=</p>
					</div>
					<div class="modal-footer">
						<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
						<button class="btn btn-primary">Save changes</button>
					</div>
				</div>
				<!-- -->
				<div class="row-fluid">
					<div class="span6">
						<!-- block -->
						<div class="block">
							<div class="navbar navbar-inner block-header">
								<div class="muted pull-left">Barang</div>
								<div class="pull-right">
									<span class="badge badge-info">17</span>

								</div>
							</div>
							<div class="block-content collapse in">
								<table class="table table-striped">
									<thead>
										<tr>
											<th>#</th>
											<th>Nama Barang</th>
											<th>Detail</th>
											<th>Harga</th>
											<th>Aksi</th>
										</tr>
									</thead>
									<tbody>
										<c:forEach var="row" items="${requestScope.barang}">
											<tr>
												<td>1</td>
												<td>${row.nama_barang}</td>
												<td>${row.detail}</td>
												<td>${row.harga}</td>
												<td><a href="#myModal" role="button" class="btn"
													data-toggle="modal"><i class="icon-pencil"></i> Insert</a></td>
											</tr>
										</c:forEach>
									</tbody>
								</table>
							</div>
						</div>
						<!-- /block -->
					</div>
					<div class="span6">
						<!-- block -->
						<div class="block">
							<div class="navbar navbar-inner block-header">
								<div class="muted pull-left">Invoices</div>
								<div class="pull-right">
									<span class="badge badge-info">812</span>

								</div>
							</div>
						</div>
						<!-- /block -->
					</div>
				</div>
				<div class="row-fluid">
					<!-- block -->
					<div class="block">
						<div class="navbar navbar-inner block-header">
							<div class="muted pull-left">Gallery</div>
							<div class="pull-right">
								<span class="badge badge-info">1,462</span>

							</div>
						</div>
						<div class="block-content collapse in">
							<div class="row-fluid padd-bottom">
								<div class="span3">
									<a href="#" class="thumbnail"> <img
										data-src="holder.js/260x180" alt="260x180"
										style="width: 260px; height: 180px;"
										src="">
									</a>
								</div>
								<div class="span3">
									<a href="#" class="thumbnail"> <img
										data-src="holder.js/260x180" alt="260x180"
										style="width: 260px; height: 180px;"
										src="">
									</a>
								</div>
								<div class="span3">
									<a href="#" class="thumbnail"> <img
										data-src="holder.js/260x180" alt="260x180"
										style="width: 260px; height: 180px;"
										src="">
									</a>
								</div>
								<div class="span3">
									<a href="#" class="thumbnail"> <img
										data-src="holder.js/260x180" alt="260x180"
										style="width: 260px; height: 180px;"
										src="">
									</a>
								</div>
							</div>

							<div class="row-fluid padd-bottom">
								<div class="span3">
									<a href="#" class="thumbnail"> <img
										data-src="holder.js/260x180" alt="260x180"
										style="width: 260px; height: 180px;"
										src="">
									</a>
								</div>
								<div class="span3">
									<a href="#" class="thumbnail"> <img
										data-src="holder.js/260x180" alt="260x180"
										style="width: 260px; height: 180px;"
										src="">
									</a>
								</div>
								<div class="span3">
									<a href="#" class="thumbnail"> <img
										data-src="holder.js/260x180" alt="260x180"
										style="width: 260px; height: 180px;"
										src="">
									</a>
								</div>
								<div class="span3">
									<a href="#" class="thumbnail"> <img
										data-src="holder.js/260x180" alt="260x180"
										style="width: 260px; height: 180px;"
										src="">
									</a>
								</div>
							</div>

							<div class="row-fluid padd-bottom">
								<div class="span3">
									<a href="#" class="thumbnail"> <img
										data-src="holder.js/260x180" alt="260x180"
										style="width: 260px; height: 180px;"
										src="">
									</a>
								</div>
								<div class="span3">
									<a href="#" class="thumbnail"> <img
										data-src="holder.js/260x180" alt="260x180"
										style="width: 260px; height: 180px;"
										src="">
									</a>
								</div>
								<div class="span3">
									<a href="#" class="thumbnail"> <img
										data-src="holder.js/260x180" alt="260x180"
										style="width: 260px; height: 180px;"
										src="">
									</a>
								</div>
								<div class="span3">
									<a href="#" class="thumbnail"> <img
										data-src="holder.js/260x180" alt="260x180"
										style="width: 260px; height: 180px;"
										src="">
									</a>
								</div>
							</div>
						</div>
					</div>
					<!-- /block -->
				</div>
			</div>
		</div>
		<hr>
		<footer>
		<p>&copy; Vincent Gabriel 2013</p>
		</footer>
	</div>
	<!--/.fluid-container-->
	<script src="assets/vendors/jquery-1.9.1.min.js"></script>
	<script src="assets/bootstrap/js/bootstrap.min.js"></script>
	<script src="vendors/easypiechart/jquery.easy-pie-chart.js"></script>
	<script src="assets/scripts.js"></script>
	<script>
		$(function() {
			// Easy pie charts
			$('.chart').easyPieChart({
				animate : 1000
			});
		});
	</script>
</body>

</html>